<script>
import ReviewApi from '@/api/review'
import MyPagination from '@/components/MyPagination.vue'

export default {
  name: 'ReviewListView',
  components: {
    MyPagination,
  },
  data() {
    return {
      reviewList: [],
      total: 0,
      pageSize: 10, // 默认每页显示10条
      curPage: 1,
    }
  },
  methods: {
    formatDate(dateString) {
      if (!dateString) return '';
      // 处理 ISO 格式的日期字符串
      if (dateString.includes('T')) {
        dateString = dateString.replace('T', ' ').split('.')[0];
      }
      const date = new Date(dateString);
      if (isNaN(date.getTime())) return dateString;
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      });
    },
    async fetchReviews() {
      try {
        const api = new ReviewApi()
        const offset = (this.curPage - 1) * this.pageSize;
        const res = await api.getReviewList(this.pageSize, offset)
        if (res.code === 200) {
          this.reviewList = res.data.list || []
          this.total = res.data.total || 0
        } else {
          this.$myMessageBox(res.msg || '获取评论失败')
        }
      } catch (err) {
        console.error('Error fetching reviews:', err)
        this.$myMessageBox('获取评论失败，请稍后重试')
      }
    },
    gotoPage(page) {
      this.curPage = page
      this.fetchReviews()
    },
    confirmDelete(reviewId) {
      if (confirm('确定要删除这条评论吗？此操作不可恢复。')) {
        this.deleteReview(reviewId)
      }
    },
    async deleteReview(reviewId) {
      try {
        const api = new ReviewApi()
        const res = await api.adminDeleteReview(reviewId)
        if (res.code === 200) {
          this.$myMessageBox('评论删除成功')
          await this.fetchReviews()
        } else {
          this.$myMessageBox(res.msg || '删除评论失败')
        }
      } catch (err) {
        console.error('Error deleting review:', err)
        this.$myMessageBox('删除评论失败，请稍后重试')
      }
    },
  },
  mounted() {
    this.fetchReviews()
  },
  watch: {
    $route: 'fetchReviews' // 监听路由变化，重新获取数据
  }
}
</script>

<template>
  <div class="review-list-view w80">
    <h2>设备评论列表</h2>
    <div class="table-container">
      <table>
        <thead>
          <tr>
            <th>序号</th>
            <th>设备名称</th>
            <th>用户</th>
            <th>评分</th>
            <th>评论内容</th>
            <th>点赞/踩</th>
            <th>发表时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="reviewList.length === 0">
            <td colspan="8" class="no-data">暂无评论数据</td>
          </tr>
          <tr v-for="(review, index) in reviewList" :key="review.id">
            <td>{{ (curPage - 1) * pageSize + index + 1 }}</td>
            <td>{{ review.deviceName }}</td>
            <td>{{ review.userNickname || review.userName }}</td>
            <td>{{ review.rating }}星</td>
            <td>{{ review.feedback }}</td>
            <td>{{ review.likeCount }}/{{ review.dislikeCount }}</td>
            <td>{{ formatDate(review.createdTime) }}</td>
            <td>
              <button class="delete-btn" @click="confirmDelete(review.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <MyPagination
      :total="total"
      :pageSize="pageSize"
      :curPage="curPage"
      @goto="gotoPage"
      :showInfo="true"
    />
  </div>
</template>

<style scoped>
.review-list-view {
  padding: 20px;
  width: 100%;
  margin: 20px auto;
}

.table-container {
  margin-top: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 95%;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
  word-wrap: break-word;
}

th:nth-child(1) { width: 8%; }  /* 序号 */
th:nth-child(2) { width: 15%; } /* 设备名称 */
th:nth-child(3) { width: 10%; } /* 用户 */
th:nth-child(4) { width: 8%; }  /* 评分 */
th:nth-child(5) { width: 20%; } /* 评论内容 */
th:nth-child(6) { width: 10%; } /* 点赞/踩 */
th:nth-child(7) { width: 14%; } /* 发表时间 */
th:nth-child(8) { width: 15%; } /* 操作 */

thead {
  background-color: #f8f8f8;
}

th {
  font-weight: bold;
  color: #333;
}

tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}

tbody tr:hover {
  background-color: #f1f1f1;
}

.no-data {
  text-align: center;
  padding: 50px;
  color: #666;
}

.delete-btn {
  padding: 8px 12px;
  margin-right: 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
  background-color: #dc3545;
  color: white;
}

.delete-btn:hover {
  background-color: #c82333;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>
